<template>
    <ul v-if="true">
        <li class="row_li" v-for="item in main" :key="item.pId">
            <!-- 头部 -->
            <div class="li_header">
                <el-checkbox
                    v-model="item.is_choose"
                    :disabled="item.disabled"
                    @change="checkItemAllChange(item, item.is_choose)">
                    {{ item.pName }}
                </el-checkbox>
            </div>
            <!-- 二级 -->
            <el-checkbox-group
                @change="value => {checkWatchChange(value, 2,item);}"
                v-model="item.checkedChild">
                <ul class="second_ul">
                    <li v-for="two_item of item.child" :key="two_item.pId">
                        <el-checkbox
                            :label="two_item.pId"
                            :disabled="two_item.disabled"
                            @change="value => {innerCheckedChange(value, item, two_item);}">
                            {{ two_item.pName }}
                        </el-checkbox>
                        <!-- 三级 -->
                        <el-checkbox-group
                            @change="value => {checkWatchChange(value, 3,two_item,item.checkedChild);}"
                            v-model="two_item.checkedChild">
                            <ul class="thrid_ul">
                                <li v-for="three_item of two_item.child" :key="three_item.pId">
                                    <el-checkbox
                                        @change="value => {innerCheckedChange(value,item,two_item,three_item);}"
                                        :label="three_item.pId"
                                        :disabled="three_item.disabled"
                                        :key="three_item.pId"
                                    >{{ three_item.pName }}</el-checkbox>
                                    <ul class="fourth_ul" :ref="three_item.pId" v-if="!three_item.disabled">
                                        <li
                                            v-for="four_item of three_item.child"
                                            :key="four_item.pId">
                                            <div
                                                unselectable="on"
                                                onselectstart="return false;"
                                                style="-moz-user-select:none;cursor:pointer"
                                                :class="['fourBtn',four_item.is_choose ? 'active' : '']"
                                                @click="fourWatchChange(four_item, three_item, two_item, item)">
                                                {{ four_item.pName }}
                                            </div>
                                            <ul class="fiveth_ul" :ref="four_item.pId" v-if="!four_item.disabled && four_item.child">
                                                <li
                                                    v-for="five_item of four_item.child"
                                                    :key="five_item.pId">
                                                    <div
                                                        unselectable="on"
                                                        onselectstart="return false;"
                                                        style="-moz-user-select:none;cursor:pointer"
                                                        :class="['fourBtn',five_item.is_choose ? 'active' : '']"
                                                        @click="fiveWatchChange(five_item, four_item, three_item, two_item, item)">
                                                        {{ five_item.pName }}
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </el-checkbox-group>
                    </li>
                </ul>
            </el-checkbox-group>
        </li>
    </ul>
</template>
<script>
export default {
    data() {
        return {
            current: {
                parent: ""
            }
        };
    },
    props: ["main", "title"],
    methods: {
        // 公共全选反选
        pick(obj, boolean) {
            if (obj.child) {
                obj.checkedChild = [];
                obj.child.map(value => {
                    value.is_choose = boolean;
                    if (boolean) {
                        obj.checkedChild.push(value.pId);
                        if (value.child) {
                            this.pick(value, boolean);
                        }
                    } else {
                        obj.checkedChild = [];
                        if (value.child) {
                            this.pick(value, boolean);
                        }
                    }
                });
            }
        },
        // 一级
        checkItemAllChange(obj, boolean) {
            // 点击一级，如果为true全部选中，为false则全部不选
            this.pick(obj, boolean);
        },
        checkWatchChange(value, type, parent, checkedChild) {
        },
        // 二级、三级change事件
        innerCheckedChange(value, one_item, two_item, three_item, four_item) {
            // 有三级的时候执行三级事件
            if (three_item) {
                // 三级之下全选/反选
                this.pick(three_item, value);
                // 根据二级判断一级选中
                /* if (two_item.checkedChild.length == two_item.child.length) {
                  if (one_item.checkedChild.indexOf(two_item.pId) == -1) {
                    one_item.checkedChild.push(two_item.pId);
                  }
                } else {
                  if (one_item.checkedChild.indexOf(two_item.pId) != -1) {
                    let num = one_item.checkedChild.findIndex(
                      item => item == two_item.pId
                    );
                    one_item.checkedChild.splice(num, 1);
                  }
                }
                if (one_item.checkedChild.length == one_item.child.length) {
                  one_item.is_choose = true;
                } else {
                  one_item.is_choose = false;
                } */
                //新逻辑  选中子  所属上级都需要勾选
                if (value) {
                    if (one_item.checkedChild.indexOf(two_item.pId) == -1) {
                        one_item.checkedChild.push(two_item.pId);
                    }
                    one_item.is_choose = true;
                }

                // 深拷贝之后change事件效果才会在页面中展示
                one_item.checkedChild = JSON.parse(
                    JSON.stringify(one_item.checkedChild)
                );
            } else if (two_item) { //没有三级的时候执行二级事件
                this.pick(two_item, value);
                /* if (one_item.checkedChild.length == one_item.child.length) {
                  one_item.is_choose = true;
                } else {
                  one_item.is_choose = false;
                } */
                //新逻辑  选中子  所属上级都需要勾选
                if (value) {
                    one_item.is_choose = true;
                }
            }
            this.$forceUpdate();
            this.$emit("update:main", this.main);
        },
        // 四级change事件
        fourWatchChange(item, three_item, two_item, one_item) {
            item.is_choose = !item.is_choose;
            // 第四级选中的数组
            let checkBox = three_item.child.filter(function (item, index) {
                return item.is_choose;
            });
            let arr = [];
            checkBox.map(value => {
                arr.push(value.pId);
            });
            three_item.checkedChild = arr;
            // 根据第四级判断第三级是否选中
            /* if (three_item.child.length == three_item.checkedChild.length) {
              if (two_item.checkedChild.indexOf(three_item.pId) == -1) {
                two_item.checkedChild.push(three_item.pId);
              }
            } else {
              if (two_item.checkedChild.indexOf(three_item.pId) != -1) {
                let num = two_item.checkedChild.findIndex(
                  item => item == three_item.pId
                );
                two_item.checkedChild.splice(num, 1);
              }
            } */
            // 根据第三级判断第二级是否选中
            /* if (two_item.checkedChild.length == two_item.child.length) {
              if (one_item.checkedChild.indexOf(two_item.pId) == -1) {
                one_item.checkedChild.push(two_item.pId);
              }
            } else {
              if (one_item.checkedChild.indexOf(two_item.pId) != -1) {
                let num = one_item.checkedChild.findIndex(
                  item => item == two_item.pId
                );
                one_item.checkedChild.splice(num, 1);
              }
            } */
            // 根据第二级判断第一级是否选中
            /* if (one_item.checkedChild.length == one_item.child.length) {
              one_item.is_choose = true;
            } else {
              one_item.is_choose = false;
            } */
            if (item.is_choose) {
                if (two_item.checkedChild.indexOf(three_item.pId) == -1) {
                    two_item.checkedChild.push(three_item.pId);
                }
                if (one_item.checkedChild.indexOf(two_item.pId) == -1) {
                    one_item.checkedChild.push(two_item.pId);
                }
                one_item.is_choose = true;

                // 选中第五级所有菜单
                if (item.child && item.child.length > 0) {
                    item.child.map(child => {
                        child.is_choose = true
                        item.checkedChild.push(child.pId)
                    })
                }
            } else {
                // 移除第五级所有菜单
                item.checkedChild = []
                if (item.child && item.child.length > 0) {
                    item.child.map(child => {
                        child.is_choose = false
                    })
                }
            }
            two_item.checkedChild = JSON.parse(JSON.stringify(two_item.checkedChild));
            one_item.checkedChild = JSON.parse(JSON.stringify(one_item.checkedChild));
            this.$emit("update:main", this.main);
        },
        // 五级change事件
        fiveWatchChange(item, four_item, three_item, two_item, one_item) {
            item.is_choose = !item.is_choose;
            // 第五级选中的数组
            let checkBox = four_item.child.filter(function (item, index) {
                return item.is_choose;
            });
            let arr = [];
            checkBox.map(value => {
                arr.push(value.pId);
            });
            four_item.checkedChild = arr;
            if (item.is_choose) {
                if (three_item.checkedChild.indexOf(four_item.pId) == -1) {
                    three_item.checkedChild.push(four_item.pId);
                }
                if (two_item.checkedChild.indexOf(three_item.pId) == -1) {
                    two_item.checkedChild.push(three_item.pId);
                }
                if (one_item.checkedChild.indexOf(two_item.pId) == -1) {
                    one_item.checkedChild.push(two_item.pId);
                }
                four_item.is_choose = true; // 勾选第四级菜单
                one_item.is_choose = true;
            }
            three_item.checkedChild = JSON.parse(JSON.stringify(three_item.checkedChild));
            two_item.checkedChild = JSON.parse(JSON.stringify(two_item.checkedChild));
            one_item.checkedChild = JSON.parse(JSON.stringify(one_item.checkedChild));
            this.$emit("update:main", this.main);
        }
    }
};
</script>
<style scoped>
.row_li {
    box-sizing: border-box;
    min-width: 160px;
    height: 100%;
    margin: 0 10px 10px 0;
    border: 1px solid #eee;
}

.li_header {
    height: 50px;
    padding: 0 15px;
    font-size: 20px;
    line-height: 50px;
    background: #eee;
}

.li_header > label {
    vertical-align: top;
}

.second_ul {
    padding-top: 10px;
}

.second_ul > li {
    padding-left: 15px;
}

.thrid_ul,
.fourth_ul {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
}

.thrid_ul > li {
    position: relative;
    margin-left: 10px;
}

.fourth_ul {
    flex-direction: column;
    min-width: 110px;
    padding-right: 0;
    /* display: none; */
}

.fourth_ul > li {
    width: 100%;
    min-width: 140px;
    margin-bottom: 5px;
}

.fourth_ul > li .fourBtn {
    /* width: 66px; */
    height: 24px;
    margin-left: 10px;
    color: #1a9fd8;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    border: 1px solid #1a9fd8;
    border-radius: 3px;
}

.fourth_ul > li .fourBtn.active {
    color: #fff;
    background: #199fd8;
}
.fourth_ul .fiveth_ul {
    padding: 10px 0 4px 15px;
}
.fourth_ul .fiveth_ul li div {
    font-size: 12px;
    padding: 0 10px;
}
.fourth_ul .fiveth_ul li + li {
    margin-top: 8px;
}

.threeCheckBox {
    content: "";
    position: absolute;
    top: 5px;
    left: 90px;
    display: inline-block;

    /* margin-left: -27px; */
    border: 5px solid #696969;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-45deg);

    /* translate(-1px, -1px) */
    /* 右 */
    /* transform: rotate(-135deg) translate(-3px, 2px); */
    /* 上 */
}

.threeCheckBox.rotateActive {
    transform: rotate(45deg) translate(-1px, -4px);
    /* 下 */
}
</style>